<template>
  <div>
    <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="60%"
    :before-close="handleClose"
  >
    <div class="contents">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      
  
      <el-form-item label="产品名称" class="inputs">
         <el-input v-model="formInline.name" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="产品条码" class="inputs">
         <el-input v-model="formInline.barCode" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="产品分类编号" class="inputs">
         <el-input v-model="formInline.categoryId" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="单位编号" class="inputs">
         <el-input v-model="formInline.unitId" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="产品状态" class="inputs">
         <el-input v-model="formInline.status" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="产品规格" class="inputs">
         <el-input v-model="formInline.standard" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="产品备注" class="inputs">
         <el-input v-model="formInline.remark" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="保质期天数" class="inputs">
         <el-input v-model="formInline.expiryDay" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="基础重量(kg)" class="inputs">
         <el-input v-model="formInline.weight" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="采购价格(元)" class="inputs">
         <el-input v-model="formInline.purchasePrice" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="销售价格(元)" class="inputs">
         <el-input v-model="formInline.minPrice" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="最低价格(元)" class="inputs">
         <el-input v-model="formInline.contact" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="库位" class="inputs">
        <el-select v-model="formInline.warehouseLocationId" class="m-2" placeholder="Select" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </el-form-item>
      <el-form-item label="仓库区域" class="inputs">
        <el-select v-model="formInline.warehouseAreaId" class="m-2" placeholder="Select" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="btnAdd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {productApi} from '@/api/erp/foundation/product'
import { ref, watch, reactive,nextTick, onMounted ,onBeforeUnmount, computed} from "vue";
const dialogVisible = ref(false);
const emit = defineEmits(['update:modelValue', 'confirm'])
const initialState = () => ({
  id: "",
  name: "",
  barCode:"",
  categoryId:"",
  unitId:"",
  status:"",
  standard:"",
  remark:"",
  expiryDay:"",
  weight:"",
  purchasePrice:"",
  minPrice:"",
  contact:"",
  warehouseLocationId:"",
  warehouseAreaId:"",
  


})
const formInline = reactive(initialState());
//新增
function btnAdd() {
  productUnitApi.create(formInline).then((res) => {
   
    if (res) {
      dialogVisible.value = false
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      // 触发确认事件（可选，用于父组件刷新）
      emit('confirm')
      // 关闭弹窗
     
    }
  })
}
// 关闭前处理（如点击右上角X）
const handleClose = (done) => {
  done() // 调用done关闭对话框
}

// 接收父组件参数
const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false,
		},


	

	});
  watch(() => props.modelValue, (newVal) => {
  dialogVisible.value = newVal;
  if (newVal) {
    resetForm();
  }
});
//重置表单
const resetForm = () => {
  Object.assign(formInline, initialState());
  // 额外处理: 确保状态默认选中"已开启"
  formInline.status = "0";
}
//  在关闭时也重置表单
const closeDialog = () => {
  dialogVisible.value = false;
  resetForm(); // 关闭时重置
  emit('update:modelValue', false);
}


  watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})


</script>
<style scoped>
.m-2{
  position: relative;
  top: -9px;
}

.inputs{
  width: 260px;
}

.contents{

}
</style>